import React, { useState }  from 'react';
import { ScrollView, Text, View, StyleSheet, Alert,Button} from 'react-native';
import { MapView, Circle, Polygon, Polyline, Marker, LatLng, CameraPosition, voidEvent } from 'react-native-amap3d';

import type * as ReactNative from "react-native";
import { number } from 'yargs';

const points = [
    {
        latitude: 39.806901,
        longitude: 116.397972,
    },
    {
        latitude: 39.806901,
        longitude: 116.297972,
    },
    {
        latitude: 39.906901,
        longitude: 116.397972,
    },
];

const points2 = [
    {
        latitude: 39.836901,
        longitude: 116.497972,
    },
    {
        latitude: 39.836901,
        longitude: 116.397972,
    },
    {
        latitude: 39.936901,
        longitude: 116.497972,
    },
];

const line1 = [
    { latitude: 40.006901, longitude: 116.097972 },
    { latitude: 40.006901, longitude: 116.597972 },
];
const line3 = [
    { latitude: 39.806901, longitude: 116.097972 },
    { latitude: 39.806901, longitude: 116.257972 },
    { latitude: 39.806901, longitude: 116.457972 },
    { latitude: 39.806901, longitude: 116.597972 },
];

function AMapDemo8() {
    const target: LatLng = { latitude: 39.806901, longitude: 116.438055 }
    const cameraPosition: CameraPosition = { target: target, zoom: 13 }
    return (
        <View style={styles.container}>
            <View > 
                <MapView
                style={{ width:  `${100}%`, height: `${100}%` }}
                mapType={1}
                myLocationEnabled={true}
                initialCameraPosition={cameraPosition}
                onPress={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
                    console.info("AMapViewEventType map3d demo " + event.nativeEvent.latitude + "===" + event.nativeEvent.longitude)
                }}
                onLongPress={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
                    console.info("AMapViewEventType map3d demo longevent===" + event.nativeEvent.latitude + "===" + event.nativeEvent.longitude)
                }}
                onLoad={(event: ReactNative.NativeSyntheticEvent<voidEvent>) => {
                    Alert.alert("onLoad successful")
                }}>
            </MapView>
            </View>
          
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        flex: 1,
        paddingTop: 24,
    }
});
export default AMapDemo8;